<template>
  <div class="row-main" style="display: flex;justify-content: center;align-items: center;height: 100%">
    <el-card class="box-card" style="width: 700px" >
      <div slot="header" class="clearfix" style="text-align: center">
        <span>批量充值</span>
      </div>
      <div :style="{'overflow-x': $store.state.app.screenWidth<590?'scroll':'none'}">
        <el-form ref="form" :model="form" label-width="180px" >
          <el-form-item label="起始卡号">
            <el-input v-model.trim="form.startNum" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="结束卡号">
            <el-input v-model.trim="form.endNum" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="卡号(一行一个卡号)">
            <el-input type="textarea" v-model="form.numberStr" :rows="5" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item :label="`卡号(${item.nums.length}张)`" v-for="(item,index) in rechargeList" :key="index">
            <el-input type="textarea" v-model="item.numberStr" :rows="5"  :disabled="true"
                      style="width: 300px;"></el-input>
            <el-select v-model="item.setMealObj" placeholder="请选择套餐" value-key="id" @change="selectSetMeal"
                       style="width: 300px;margin: 15px 0;">
              <el-option
                v-for="obj in item.setMealList"
                :key="obj.id"
                :label="obj.mealName"
                :value="obj">
              </el-option>
            </el-select>
            <el-select v-model="item.dictIsPreStorage" placeholder="请选择" value-key="id" @change="selectSetMeal" style="width: 300px;">
              <el-option key="1" label="本月生效" value="NO"></el-option>
              <el-option key="2" label="次月生效" value="YES"></el-option>
            </el-select>
            <span style="color:red">*仅支持次月生效的套餐</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="row-form-btn" >
        <el-button type="shenda" size="small" icon="el-icon-search" @click="searchSetmeals" v-preventReClick>查询套餐</el-button>
        <el-button type="shenda" size="small" icon="el-icon-s-finance" @click="rechargeButton" v-preventReClick>
          充值
        </el-button>
      </div>
    </el-card>


    <!--      <div style="padding-left: 20px;width: 100%;">-->

    <!--        <div style="float: right;width: 55%;">-->
    <!--          <el-form ref="form" label-width="80px" label-position="top" style="width: 80%">-->
    <!--            <div v-for="(item,index) in rechargeList">-->
    <!--              <div style=";border-left: 2px lightgrey solid;padding-left: 20px;margin-top: 20px">-->
    <!--                <el-form-item :label="`卡号(${item.nums.length}张)`">-->
    <!--                  <el-input type="textarea" v-model="item.numberStr" :rows="7" :key="index" :disabled="true"></el-input>-->
    <!--                </el-form-item>-->
    <!--                <el-select v-model="item.setMealObj" placeholder="请选择套餐" value-key="id" @change="selectSetMeal">-->
    <!--                  <el-option-->
    <!--                    v-for="obj in item.setMealList"-->
    <!--                    :key="obj.id"-->
    <!--                    :label="obj.mealName"-->
    <!--                    :value="obj">-->
    <!--                  </el-option>-->
    <!--                </el-select>-->
    <!--                <el-select v-model="item.dictIsPreStorage" placeholder="请选择" value-key="id" @change="selectSetMeal">-->
    <!--                  <el-option key="1" label="本月生效" value="NO"></el-option>-->
    <!--                  <el-option key="2" label="次月生效" value="YES"></el-option>-->
    <!--                </el-select>-->
    <!--                <span style="color:red">*仅支持次月生效的套餐</span>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <el-form-item style="border-left: 2px lightgrey solid;margin-top: 30px;padding-left: 20px;" v-show="rechargeList.length!=0">-->
    <!--              <el-button type="primary" @click="rechargeButton" style="" v-preventReClick>充值</el-button>-->
    <!--            </el-form-item>-->
    <!--          </el-form>-->
    <!--        </div>-->
    <!--      </div>-->


    <el-dialog title="请选择充值方式" :visible.sync="rechargeTypeShow" :append-to-body="true" top="33vh" :width="$store.state.app.screenWidth<700?'100%':'700px'">
      <el-dialog
        :width="$store.state.app.screenWidth<700?'100%':'700px'"
        title="温馨提示！"
        :visible.sync="innerVisible"
        :append-to-body="true" top="40vh">
        <div>
          确定使用余额么？
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="balanceRecharge" v-preventReClick>确定</el-button>
        </div>
      </el-dialog>

      <div style="text-align: center;width: 100%;display: flex;flex-direction: column">
        <img width="150px" height="150px" style="margin: 0 auto" :src="payBackBody.payQr"/>
        <div style="font-size: large">共 <span style="color:red">{{ payBackBody.price }}</span> 元，请打开微信扫一扫或者余额付款</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rechargeTypeShow = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true" v-preventReClick>余额付款</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {searchSetmealsGroupByHeaderId, batchRecharge, balanceRecharge, orderStatus} from '@/api/getData'
import Disable from "../card/disable/index";

export default {
  name: "batchRecharge",
  components: {Disable},
  data() {
    return {
      form: {
        startNum: "",
        endNum: "",
        numberStr: "",
        nums: null
      },
      rechargeTypeShow: false,
      rechargeList: [],
      innerVisible: false,
      selectPayMethod: 1,
      payBackBody: {
        payQr: '',
        id: '',
        price: 0
      },
      timeOut: '123',
      pagekey: '',
    }

  },
  watch: {
    'payBackBody.id': function (newObj, oldObj) {
      // if this obj is not null and empty string
      if (newObj != '') {
        this.timeOut = setInterval(this.setTimeRequest, 2000)
      } else {
        clearInterval(this.timeOut)
      }
    }
  },
  beforeDestroy() {
    window.clearInterval(this.timeOut)
  }
  ,
  methods: {
    async rechargeButton() {
      //this.rechargeList.push(this.rechargeForm)


      for (let i in this.rechargeList) {
        let v = this.rechargeList[i]
        if (v.setMealObj == undefined || v.setMealObj == null || v.setMealObj == '') {
          this.$message.error("没有选择套餐！")
          return
        }
        v.setMealName = v.setMealObj.mealName
        v.setMealId = v.setMealObj.id
      }

      if (this.payBackBody.id != '') {
        this.rechargeTypeShow = true
      } else {

        let v = await batchRecharge(this.rechargeList, {pagekey: this.pagekey})
        if (v._result) {
          this.payBackBody.payQr = v.data.payQr
          this.payBackBody.id = v.data.id
          this.payBackBody.price = v.data.price
          this.rechargeTypeShow = true
        }
        this.pagekey = await this.$getPageKey();
      }
    }
    ,
    async searchSetmeals() {
      if ((this.form.numberStr != null && this.form.numberStr != '') ||
        (this.form.startNum != null && this.form.startNum != '') ||
        (this.form.endNum != null && this.form.endNum != '')) {
        let numberArray = this.form.numberStr.split('\n')

        this.form.nums = numberArray;
        searchSetmealsGroupByHeaderId(this.form).then(v => {
          console.log(v);
          v.data.forEach(a => {
            a.numberStr = a.nums.join("\n");
            a.setMealObj = ''
          })
          this.rechargeList = v.data
          this.payBackBody.payQr = ''
          this.payBackBody.id = ''
          this.payBackBody.price = ''
        })
        this.pagekey = await this.$getPageKey();
      }
    }
    ,
    async balanceRecharge() {
      this.balancePayloading = true
      balanceRecharge({id: this.payBackBody.id}, {pagekey: this.pagekey}).then(v => {
        if (v._result) {
          this.$message.success("操作成功！")
        }
      })
      this.pagekey = await this.$getPageKey();
    },
    selectSetMeal() {
      this.payBackBody.id = ''
    },
    async setTimeRequest() {
      let isSuccess = await orderStatus({id: this.payBackBody.id})
      if (isSuccess.data) {
        window.clearInterval(this.timeOut)
        console.log("完成->>>跳转到详情页！")
        this.$router.push({path: '/rechargeBatch/cusBatchRechargeOrderLog'})
      }
    }
  }
}
</script>

<style scoped>

</style>
